<template>
	<div class="ffffff mainpadding radius" style="width: 75%;">
		<div class="flexleft">
			<div class="margin_right3 pointer" :class="tabActive==index?'active':'noActive'"
				v-for="(item,index) in tabList" :key="index" @click="changeTab(index)">
				{{item.name}}
			</div>
		</div>
		<study-order-list v-for="item in list.data" :key="item.id" :child="item" :types="0"></study-order-list>
		<div class="flexcenter margin_top" v-if="list.total > 15">
			<el-pagination background layout="prev, pager, next" :page-size="15" :total="list.total"
				@current-change="listChange">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	import { getOrderList } from "@/API/home"
	import studyOrderList from "./components/studyOrderList"
	export default {
		components: {
			studyOrderList
		},
		data() {
			return {
				tabActive: 0,
				tabList: [{
					name: "优课",
				}, {
					name: "辅导",
				}, {
					name: "测试",
				}, {
					name: "资料",
				}],
				list: {
					data: []
				}
			}
		},
		created() {
			this.getList()
		},
		methods: {
			async getList(page) {
				let res = await getOrderList({
					lesson_type: this.tabActive + 1,//lesson_type
					page: page || 1
				})
				this.list = res.data.data
				this.list.data = res.data.data.data
			},
			listChange(val) {
				console.log(val)
				this.getCourseList(val)
			},
			changeTab(index) {
				this.tabActive = index
				this.getList()
			}
		},
	}
</script>

<style lang="scss" scoped>
	.noActive {
		font-size: 15px;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.active {
		font-size: 15px;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #3478F5;
		position: relative;
	}

	.active::after {
		content: '';
		width: 22px;
		height: 2px;
		background: #3478F5;
		border-radius: 6px 6px 6px 6px;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: -10px;
	}
</style>